<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>新建抽签</title>

    <!-- 业务css -->
	<link rel="stylesheet" type="text/css"	href="${ctx}/resource/css/multi-select-metro.css" />
	<style type="text/css">
		.itemTitle{
			margin-top: 10px;
		}
	</style>
</head>

<body>
	<!-- 菜单及导航数据  -->
    <data id="info" nav="lots" menu="createLots" service="抽签服务" action="新建抽签">
    
	<!-- 业务部分  开始  -->
    <div class="row wrapper border-bottom white-bg page-heading animated zoomIn min-height">
        
        <!-- 业务内容  -->
       	<div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>创建一个抽签 <small class="text-navy">点击新建抽奖按钮，新建一个抽奖活动</small></h5>
                    </div>
                    <div class="ibox-content">
                        <form class="form-horizontal" method="post" id="voteForm" action="">
                        	<div class="row">
								<div class="form-group">
									<label class="col-sm-3 control-label">抽签主题</label>
									<div class="col-sm-7">
										<input type="text" id="title" name="title" class="form-control" placeholder="请输入抽签主题">
									</div>
								</div>
								<div class="hr-line-dashed"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label">参与人员</label>
									<div class="col-sm-7"  id="lotsMember">
										 <select multiple="multiple" class="form-control" id="my_multi_select2" name="my_multi_select2[]">
											<optgroup label="全部"></optgroup>
										 </select>
									</div>
								</div>
								<div class="hr-line-dashed"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label">
										抽签类型
									</label>
									<div class="col-sm-7">
										<select class="form-control" id="lotsType" name="type">
											<option class="defaultDisplay" value="0">请选择抽签类型</option>
											<option value="1" style="display:none;">抽奖式</option>
											<option value="2" id="groupOption" selected="selected">分组式</option>
										</select> 
									</div>
								</div>
								<div class="hr-line-dashed"></div>
								<div class="form-group groupInfo">
									<label class="col-sm-3 control-label">
										待分配项
									</label>
									<div class="col-sm-7 controls">
										<input class="btn btn-primary" type="button" value="添加分组" onclick="addGroup()" />
										<input id="group_2"  class="btn btn-danger" type="button" value="删除分组" onclick="delGroup()" />
										<p><input type="text" class="form-control itemTitle"
											placeholder="请输入组名" maxLength="4"/></p>
										<p><input type="text" class="form-control itemTitle"
											placeholder="请输入组名" maxLength="4"/></p>
									</div>
								</div>
									 
                                </div>
								<div class="row">
									<div class="form-group ">
										<label class="col-sm-3 control-label"></label>
	                                    <div class="col-sm-7">
	                                        <input type="button" class="btn btn-primary" value="确定" onclick="checkForm()" />
											<button type="reset" class="btn btn-white">取消</button>
	                                    </div>
	                                </div>
                                </div>
							</form>
						</div>
	                </div>
	            </div>
	        </div>
        </div>
        
        <!-- 业务部分  结束  -->

		<js>
	    <!-- 业务js  -->
		<script src="${ctx}/resource/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
	    <script src="${ctx}/resource/js/chosen.jquery.min.js"></script>
		<script src="${ctx}/resource/js/select2.min.js"></script>
		 
		<script src="${ctx}/resource/js/jquery.inputmask.bundle.min.js"></script>   
		<script src="${ctx}/resource/js/jquery.input-ip-address-control-1.0.min.js"></script>
		<script src="${ctx}/resource/js/jquery.multi-select.js"></script>   
	 
		<script src="${ctx}/resource/js/app.js"></script>
		<script src="${ctx}/resource/js/form-components.js"></script>     
		<script src="${ctx}/resource/js/bootstrap-datetimepicker.js"></script>
		
		<script>
		var itemsTitle="";
		$(function() {
			//抽签
			var type = $("#lotsType").get(0);//获取Dom元素
			$("#lotsType").focus(function() {
				$(".defaultDisplay").detach();
			}).change(function() {
				var typeNum = type.options[type.selectedIndex].value;
				if (typeNum == 2) {
					$(".groupInfo").show();
					
				}
				if (typeNum == 1) {
					$(".groupInfo").hide();
				}
			}) 
		})
		$(document).ready(function() {
		
			// initiate layout and plugins
			$.ajax({
				type : "POST",
				dataType : "json",
				url : "${ctx}/user/getAllUserId.do",
				success : function(data) {
					for(var i=0;i<data.length;i++){
						$("#my_multi_select2 optgroup").append("<option>"+data[i].name+"</option>"); 
						$(".ms-selectable ul li ul.ms-optgroup").append("<li class='ms-elem-selectable' id='"+data[i].uid+"' onclick='chooseMen(this)'><span>"+data[i].name+"</span></li>");
						$(".ms-selection ul li ul.ms-optgroup").append("<li class='ms-elem-selection ' id='"+data[i].uid+"' style='display: none;' onclick='reChoose(this)'><span>"+data[i].name+"</span></li>");
					}
				}
			})
			App.init();
			FormComponents.init();
			//候选人的全选与全反选功能
			$(".ms-selectable ul li ul.ms-optgroup li.ms-optgroup-label").click(function(){
				$(".ms-selection ul li ul.ms-optgroup li").each(function(){
						$(this).addClass("ms-selected");
						$(this).css({"display":"list-item"});
				});
				$(".ms-selectable ul li ul.ms-optgroup li.ms-elem-selectable").each(function(){
						$(this).removeClass("ms-selected");
						$(this).css({"display":"none"});
				})
				
			})
			$(".ms-selection ul li ul.ms-optgroup li.ms-optgroup-label").click(function(){
				$(".ms-selection ul li ul.ms-optgroup li.ms-elem-selection").each(function(){
					$(this).removeClass("ms-selected");
					$(this).css({"display":"none"});
				});
				$(".ms-selectable ul li ul.ms-optgroup li").each(function(){
						$(this).css({"display":"block"});
				})
			});
			
		});
		function chooseMen(obj){
			obj.style.display="none";
			var uid=obj.id;
			$(".ms-selection ul li ul.ms-optgroup li").each(function(){
				if(this.id==uid){
					$(this).addClass("ms-selected");
					$(this).css({"display":"list-item"});
				}
			})
		}
		function reChoose(obj){
			obj.style.display="none";
			var uid=obj.id;
			$(".ms-selectable ul li ul.ms-optgroup li").each(function(){
				if(this.id==uid){
					$(this).css({"display":"block"});
				}
			})
		}
		function addGroup(){
			if($(".groupInfo div.controls input.itemTitle").length<10){
				$(".groupInfo div.controls").append("<p><input type='text' class='form-control itemTitle' placeholder='请输入组名'/></p>");
			}else{
				layer.tips("分组信息不得多于十项！", "#group_2", {
					tips:[2, '#c00']
				})
			}
		}
		function delGroup(){
			if($(".groupInfo div.controls input.itemTitle").length>2){
				$(".groupInfo div.controls input.itemTitle:last").remove();
			}else{
				layer.tips("分组信息不得少于两项！", "#group_2", {
					tips:[2, '#c00'],
				})
			}
		}
		function checkForm() {
			//获取抽签类型
			var type = $("#lotsType").get(0);
			var typeNum = type.options[type.selectedIndex].value;
			
			var title = $("#title").val();
			
			var candidatesId = "";
			var candidate=$(".ms-selection ul li ul.ms-optgroup li.ms-selected");
			
			if (!title) {
				layer.tips("请输入主题！", "#title", {
					tips:[2, '#c00']
				});
				return;
			}
			if(candidate.length==0){
				layer.tips("请选择参与人员！", "#ms-my_multi_select2", {
					tips:[2, '#c00']
				});
				return;
			}
			if(typeNum==0){
				layer.tips("请选择抽签类型！", "#lotsType", {
					tips:[2, '#c00']
				})
				return;
			}
			//获得抽签主题字符串
			for(var i=0;i<$("input.itemTitle").length;i++){
				itemsTitle+=$("input.itemTitle").get(i).value+",";
			}
			
			//获得参与人员字符串
			for(var i=0;i<candidate.length;i++){
				if($(candidate.get(i)).css("display") != 'none') {
					candidatesId+=candidate.get(i).id+",";
    			}			
			}
			if(candidate.length<$("input.itemTitle").length||candidate.length<2){
				layer.tips("参与人数不得少于两人！", "#ms-my_multi_select2", {
					tips:[2, '#c00']
				});
			}
			$.ajax({
				type : "POST",
				dataType : "json",
				url : "${ctx}/lots/save.do",
				data : {//发送到服务端的数据，参与人id字符串，event基本信息，item信息
					"title":title,
					"type":typeNum,
					"candidatesId":candidatesId,
					"itemsTitle":itemsTitle
				},
				success : function(data) {
					var index = parent.layer.getFrameIndex(window.name);
					parent.layer.msg("创建成功");
					if(data.type=="1"){
						parent.location.href="${ctx}/center/lots/simple.html?lid="+data.lid;
					}else{
						parent.location.href="${ctx}/center/lots/grouping.html?lid="+data.lid;
					}
					parent.layer.close(index);
				}
			}); 
			
				
		}
		$(function(){
			$(".ms-list").niceScroll({cursorborder:"",cursorcolor:"#18a689",boxzoom:true,touchbehavior:true,cursoropacitymax:0.7});
			
		});
		</script>
		
	</js>
	
</body>

</html>